<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        font-size: 20px;
      }
    </style>
    <meta charset="UTF-8" />
    <title>Document Object Mobel</title>
  </head>

  <body>
    <div id="parent_element">
      <p id="child_element_p1">这里将被插入新元素第一行</p>
      <p id="child_element_p2">这里将被插入新元素第二行</p>
      <p id="child_element_p3">这个元素将被克隆</p>
    </div>

    <button id="append_child_button">附加到末尾</button>
    <button id="insert_bufore_button">插入XX之前</button>
    <button id="delete_button">删除元素</button>
    <button id="replace_child_button">替换元素</button>
    <button id="clone_button">克隆元素</button>

    <script src="./element_crud.js"></script>
  </body>
</html>
